<template>
	<xbd-pages-content title="访客审批">
		<template #content>
			<view class="visitorsapproval">
				<v-tabs
					v-model="current"
					:tabs="tabs"
					@change="changeTab"
					pills
					paddingItem="0 106rpx"
					v-if="userInfo.user_role === 'leader'"
				></v-tabs>
				<view class="card" v-if="!current">
					<xbd-small-card :num="visitorCount.wait" title="待审批" bg="orange" @clickSmallCard="clickSmallCard(0)"></xbd-small-card>
					<xbd-small-card :num="visitorCount.history" title="我的审批" bg="blue" @clickSmallCard="clickSmallCard(1)"></xbd-small-card>
					<xbd-small-card :num="visitorCount.today" title="我的访客" bg="black" @clickSmallCard="clickSmallCard(2)"></xbd-small-card>
				</view>
				<view class="cards" v-else>
					<management-card title="全部访客" :num="visitorCount.today" @clickCard="clickSmallCard(2)"></management-card>
				</view>
				<xbd-date :date.sync="date"></xbd-date>
				<view class="chart-content">
					<xbd-title title="访客趋势"></xbd-title>
					<view class="chart1">
						<chart-one-line :chart-data="visitorsTrends"></chart-one-line>
					</view>
				</view>
				<view class="chart-content">
					<xbd-title title="审批分析"></xbd-title>
					<view class="chart1">
						<chart-two-smooth-line :chart-data="approvalAnalysis"></chart-two-smooth-line>
					</view>
				</view>
				<view class="chart-content">
					<xbd-title title="来访原因"></xbd-title>
					<view class="chart2" v-if="hackReset ==true">
						<chart-radar  :chart-data="visitorsReason"></chart-radar> 
					</view>
				</view>
				<view class="chart-content">
					<xbd-title title="访客性别"></xbd-title>
					<view class="chart1">
						<chart-two-smooth-line :chart-data="visitorsGender"></chart-two-smooth-line>
					</view>
				</view>
				<view class="chart-content">
					<xbd-title title="访客年龄"></xbd-title>
					<view class="chart1">
						<chart-bar :chart-data="visitorsAge"></chart-bar>
					</view>
				</view>
				<view class="chart-content">
					<xbd-title title="频繁来访TOP5"></xbd-title>
					<view class="chart3">
						<image class="image" v-if="frequentVisitsTOP5.data.length === 0" src="../../static/images/health/noCharts.png" mode=""></image>
						<chart-transposed-bar v-else :chart-data="frequentVisitsTOP5"></chart-transposed-bar>
					</view>
				</view>
				<view class="chart-content" v-if="current === 1 && hackReset">
					<xbd-title title="被访单位"></xbd-title>
					<view class="chart2">
						<image class="image" v-if="VisitedDepartment.data.length === 0" src="../../static/images/health/noCharts.png" mode=""></image>
						<ChartRadarToo v-else :chart-data="VisitedDepartment"></ChartRadarToo>
					</view>
				</view>
				<view class="chart-content" v-if="current === 1">
					<xbd-title title="访客入园平均时长"></xbd-title>
					<view class="chart1">
						<chart-one-line-nosmooth :chart-data="visitedVehicles"></chart-one-line-nosmooth>
					</view>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { mapState } from 'vuex';
	const dayjs = require('dayjs');
	const date = dayjs(new Date()).format('YYYY-MM');
	import ChartRadarToo from '@/components/visitorsapproval/chart-radar-too.vue';
	import ManagementCard from '@/components/management/ManagementCard.vue';
	import { Visitor } from '@/api/index.js';
	export default {
		data() {
			return {
				num: 0,
				hackReset:true,
				current: 0,
				tabs: ['我的访客', '全部访客'],
				visitorCount: {
					wait: 0,
					history: 0,
					today: 0
				},
				notApproved: 3,
				historicaApproval: 71,
				visitorsToday: 5,
				date: date,
				type: 'my',
				visitorsTrends: {
					name: '访客',
					color: '#457AFF',
					unit: '人',
					x: 'x',
					y: 'y',
					data: []
				},
				approvalAnalysis: {
					name: [ '预约','审批'],
					color: ['#FF7543', '#222222'],
					unit: '人',
					shape: 'smooth',
					x: 'x',
					y: ['y', 'series'],
					data: []
				},
				visitorsGender: {
					name: ['男性', '女性'],
					color: ['#457AFF', '#FFA6A3'],
					unit: '人',
					x: 'x',
					shape: 'smooth',
					y: ['y', 'series'],
					data: []
				},
				visitedVehicles: {
					name: '平均时长（时）',
					color: '#ff7543',
					unit: 'h',
					x: 'x',
					y: 'y',
					data: []
				},
				visitorsReason: {
					color: '#222222',
					x: 'x',
					y: 'y',
					unit: '人',
					data: []
				},
				
				VisitedDepartment: {
					color: '#457aff',
					x: 'x',
					y: 'y',
					unit: '人',
					data: []
				},
				visitorsAge: {
					unit: '人',
					color: '#39d4d1',
					name: '年龄',
					x: 'x',
					y: 'y',
					data: []
				},
				frequentVisitsTOP5: {
					color: '#222222',
					name: '次数',
					unit: '次',
					x: 'x',
					y: 'y',
					data: []
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			ChartRadarToo,
			ManagementCard
		},
		watch: {
			async date(val) {
				let list = [];
				
				if (this.type === 'my') {
					list = [
						Visitor.getVisitorChart({chart: 'visitor', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'audit', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'reason', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'gender', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'age', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'count', date: val, type: this.type})
					];
				} else {
					list = [
						Visitor.getVisitorChart({chart: 'visitor', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'audit', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'reason', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'gender', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'age', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'count', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'dept', date: val, type: this.type}),
						Visitor.getVisitorChart({chart: 'avgtime', date: val, type: this.type})
					];
				}
				try {
					this.$showLoading('加载中');
					const res = await Promise.all(list);
					console.log(res)
					uni.hideLoading();
					this.visitorsTrends.data = res[0].data.chart;
					this.approvalAnalysis.data = res[1].data.chart;
					this.visitorsReason.data = res[2].data.chart;
					this.visitorsGender.data = res[3].data.chart;
					this.visitorsAge.data = res[4].data.chart;
					// console.log(this.visitorsAge.data,'this.visitorsAge.data')
					this.frequentVisitsTOP5.data = res[5].data.chart;
					if (this.type === 'all') {
						this.VisitedDepartment.data = res[6].data.chart;
						console.log(this.VisitedDepartment.data,'this.VisitedDepartment.data')
						this.visitedVehicles.data = res[7].data.chart;
					}
					// 重新渲染dom节点  防止绘图出错
					this.hackReset = false
					this.$nextTick(()=>{
						this.hackReset = true
					})
					
				} catch(e) {
					console.log(e)
					uni.hideLoading();
				}
			}
		},
		methods: {
			changeTab(index) {
				
				this.visitorCount.today = 0
				this.visitorCount.wait = 0
				this.visitorCount.history = 0
				// console.log(index);
				this.date =  dayjs(new Date()).format('YYYY-MM');
				uni.pageScrollTo({
					scrollTop: 0, //距离页面顶部的距离
					duration: 0
				});
				if (index) {
					this.type = 'all';
				} else {
					this.type = 'my';
				}
				this.getVisitorInfo();
			},
			async getNum(){
				try{
					const res  = await Visitor.getVisitorState(this.type)
					this.visitorCount = res.data.count;
				}catch(e){
					//TODO handle the exception
				}
			},
			async getVisitorInfo() {
				let list = [];
				if (this.type === 'my') {
					list = [
						Visitor.getVisitorState(this.type),
						Visitor.getVisitorChart({chart: 'visitor', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'audit', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'reason', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'gender', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'age', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'count', date: this.date, type: this.type})
					];
				} else {
					list = [
						Visitor.getVisitorState(this.type),
						Visitor.getVisitorChart({chart: 'visitor', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'audit', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'reason', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'gender', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'age', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'count', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'dept', date: this.date, type: this.type}),
						Visitor.getVisitorChart({chart: 'avgtime', date: this.date, type: this.type})
					];
				}
				try {
					this.$showLoading('加载中');
					const res = await Promise.all(list);
					console.log(res)
					uni.hideLoading();
					this.visitorCount = res[0].data.count;
					this.visitorsTrends.data = res[1].data.chart;
					this.approvalAnalysis.data = res[2].data.chart;
					console.log(this.approvalAnalysis.data,'this.approvalAnalysis.data')
					this.visitorsReason.data = res[3].data.chart;
					console.log(this.visitorsReason.data,'this.visitorsReason.data')
					this.visitorsGender.data = res[4].data.chart;
					console.log(this.visitorsGender.data ,'this.visitorsGender.data ')
					this.visitorsAge.data = res[5].data.chart;
					this.frequentVisitsTOP5.data = res[6].data.chart;
					if (this.type === 'all') {
						this.VisitedDepartment.data = res[7].data.chart;
						console.log(this.VisitedDepartment.data,'this.VisitedDepartment.data')
						this.visitedVehicles.data = res[8].data.chart;
					}
					this.hackReset = false
					this.$nextTick(()=>{
						this.hackReset = true
					})
				} catch(e) {
					console.log(e.errMsg)
					this.$showToast(e.errMsg);
					uni.hideLoading();
				}
			},
			clickSmallCard(inx) {
				let url = '';
				const isMyVisitor = this.current ? 'all' : 'my'
				if (inx === 0) {
					url = './pendingapproval?isMyVisitor=' + isMyVisitor;
				} else if (inx === 1) {
					url = './approvalrecord?isMyVisitor=' + isMyVisitor;
				} else if (inx === 2) {
					url = './visitorsrecord?isMyVisitor=' + isMyVisitor;
				}
				uni.navigateTo({
					url
				})
			}
		},
		onLoad() {
			this.getVisitorInfo();
		},
		
		onShow() {
			this.getNum();
			
		},
		onUnload() {
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .v-tabs {
		margin-bottom: 10px;
	}
	.visitorsapproval {
		padding: 20px 50rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		.card {
			display: flex;
			justify-content: space-between;
			
			margin-bottom: 20px;
		}
		.cards {
			
			margin-bottom: 20px;
		}
		::v-deep .xbd-date {
			margin-bottom: 25px;
		}
		.chart-content {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
			.xbd-title {
				margin-bottom: 20px;
			}
			.chart1 {
				width: 720rpx;
				height: 180px;
				margin-left: -35rpx;
				
				box-sizing: border-box;
			}
			.chart2 {
				width: 670rpx;
				height: 560rpx;
				// margin-left: 20rpx;
				
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				.image{
					width: 274rpx;
					height: 234rpx;
				}
			}
			.chart3 {
				width: 720rpx;
				height: 400rpx;
				margin-left: -35rpx;
				
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				.image{
					width: 274rpx;
					height: 234rpx;
				}
			}
		}
	}
</style>
